<template>
  <div class="lll">
      <div class="top" v-for="(v,i) in $store.state.smallhotstore.arr" :key="i">
          <img :src="v.img" alt="">
      <ul>
          <li style="background: rgb(255, 90, 27)">{{v.name1}}</li>
          <li>{{v.name2}}</li>
      </ul>
      <p>1</p>
      </div>
  </div>
</template>

<script>
export default {
    props:[
        "img","name1","name2"
    ]

}
</script>

<style scoped>
.lll{
    display: flex;
}
.top{
    width: 105px;
    /* display: flex; */
    margin-left: 20px;
}
div{
    position: relative;
    /* display: flex; */
}
    img{
        width: 105px;
        height: 105px;
    }
    ul{
        width: 109px;
        height: 49px;
        font-size: 11px;
        border-radius: 20%;
        /* background-color: blueviolet; */
    }
    ul li{
        width:105px;
        /* height: 49px; */
         background-color: blueviolet;
         /* margin-left: 10px; */
            }
    p{
     position: absolute;
     top: 0;
     left: 0;
    }
</style>